<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录系统</title>
    <!-- <link rel="stylesheet" type="text/css" href="iconfont.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
            text-decoration: none;
        }
        body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            /* align-items: center; */
            font-size: 12px;
            background-color: #ecf0f3;
            color: #a0a5a8;
            margin-top: 8%;
        }
        #app{
            position: relative;
            width: 1000px;
            min-width: 1000px;
            min-height: 600px;
            height: 600px;
            padding: 25px;
            background-color: #ecf0f3;
            box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
            border-radius: 12px;
            overflow: hidden;
        }
        @media (max-width: 1200px){
            #app{
                transform: scale(0.7);
            }
        }
        @media (max-width:1000px) {
            #app{
                transform: scale(0.6);
            }
        }

        @media (max-width:800px){
            #app{
                transform: scale(0.5);
            }
        }
        @media (max-width:600px){
            #app{
                transform: scale(0.4);
            }
        }
        .container{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            width: 600px;
            height: 100%;
            padding: 25px;
            background-color: #ecf0f3;
            transition: 1.25s;

        }
        .container div {
            line-height: 50px;
            text-align: center;
        }
        .form{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        .input{
            width: 350px;
            height: 40px;
            margin: 4px 0;
            padding-left: 25px;
            font-size: 13px;
            letter-spacing: 0.15px;
            border:  none;
            outline: none;
            background-color: #ecf0f3;
            transition: 0.25s ease;
            border-radius: 8px;
            box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;

        }
        .input:focus{
            box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
        }
        .formLink{
            color: #181818;
            font-size: 15px;
            margin-top: 25px;
            /* border-bottom: 1px solid #a0a5a8; */
            line-height: 2;
        }
        .title{
            font-size: 34px;
            font-weight: 700;
            line-height: 3;
            color: #181818;
            letter-spacing: 10px;
        }
        .description{
            font-size: 14px;
            letter-spacing: 0.25px;
            text-align: center;
            line-height: 1.6;
        }
        .button{
            width: 180px;
            height: 50px;
            border-radius: 25px;
            margin-top: 50px;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 1.15px;
            background-color: black;
            color: #f9f9f9;
            box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
            border: none;
            outline: none;
        }
        .containerOne{
            z-index: 100;
            left: calc(100% - 600px);
        }
        .containerTwo{
            left: calc(100% - 600px);
            z-index: 0;
        }
        .switch{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 400px;
            padding: 50px;
            z-index: 200;
            transition: 1.25s;
            background-color: #ecf0f3;
            overflow: hidden;
            box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
        }
        .switchCircle{
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background-color: #ecf0f3;
            box-shadow: inset 8px 8px 12px #b8bec7, inset -8px -8px 12px #fff;
            bottom: -60%;
            left: -60%;
            transition: 1.25s;
        }
        .switchCircleOne{
            top: -30%;
            left: 60%;
            width: 300px;
            height: 300px;
        }
        .switchContainer{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: absolute;
            width: 400px;
            padding: 50px 55px;
            transition: 1.25s;
        }
        .switchButton{
            cursor: pointer;
        }
        .switchButton:hover,
        .submit:hover{
            box-shadow: 6px 6px 10px #d1d9d1,-6px -6px 10px #f9f9f9;
            transform: scale(0.985);
            transition: 0.25s;
        }
        .switchButton:active,
        .switchButton:focus{
            box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
            transform: scale(0.97);
            transition: 0.25s;
        }
        .is-txr{
            left: calc(100% - 400px);
            transition: 1.25s;
            transform-origin: left;
        }
        .is-txl{
            left: 0;
            transition: 1.25s;
            transform-origin: right;
        }
        .is-z{
            z-index: 200;
            transition: 1.25s;
        }
        .is-hidden{
            visibility: hidden;
            opacity: 0;
            position: absolute;
            transition: 1.25s;
        }
        .is-gx{
            animation: is-gx 1.25s;
        }
        @keyframes is-gx{
            0%,
            10%,
            100%{
                width: 400px;
            }
            30%,
            50%{
                width: 500px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 注册 -->
        <div class="container containerOne" id="a-container">
            <form action="" method="" class="form" id="formOne">
                <h2 class="title">创建账号</h2>
                <input id="register_username" type="text" class="input" placeholder="用户名">
                <input id="register_password" type="password" class="input" placeholder="密码">
                <div class="button" id="register">SIGN UP</div>
            </form>
        </div>
        <!-- 登录 -->
        <div class="container containerTwo" id="b-container">
            <form action="" method="" class="form" id="formTwo">
                <h2 class="title">登录账号</h2>
                <input id="login_username" type="text" class="input" placeholder="用户名">
                <input id="login_password" type="password" class="input" placeholder="密码">
                <a href="#" class="formLink" >忘记密码？</a>
                <div class="button" id="login">LOGIN IN</div>
            </form>
        </div>
        <div class="switch" id="switch-content">
            <div class="switchCircle"></div>
            <div class="switchCircle switchCircleOne"></div>
            <div class="switchContainer" id="switchOne">
                <h2 class="title" style="letter-spacing: 0;">Welcome Back !</h2>
                <p class="description">已有账号,去登陆探索新世界吧</p>
                <!-- 切换按钮 -->
                <button class="switchButton button switchbtn">LOGIN IN</button>
            </div>

            <div class="switchContainer is-hidden" id="switchTwo">
                <h2 class="title" style="letter-spacing: 0;">Hello Friend !</h2>
                <p class="description">去注册一个账号吧</p>
                <button class="switchButton button switchbtn">SIGN UP</button>
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.6.3.min.js"></script>
    <script>

        let switchContent = document.querySelector("#switch-content");
        let switchOne = document.querySelector("#switchOne");
        let switchTwo = document.querySelector("#switchTwo");
        let switchCircle = document.querySelectorAll(".switchCircle");
        // 获取切换的按钮
        let switchBtn = document.querySelectorAll(".switchbtn");
        let aContainer = document.querySelector("#a-container");
        let bContainer = document.querySelector("#b-container");
        //获取form里的按钮
        // let submit = document.querySelectorAll(".submit");
        let getButtons = (e) => e.preventDefault()
        
        let changeForm = (e) => {
            //修改类名
            switchContent.classList.add("is-gx");
            setTimeout(function(){
                switchContent.classList.remove("is-gx");
            },1500)
            switchContent.classList.toggle("is-txr");
            switchCircle[0].classList.toggle("is-txr");
            switchCircle[1].classList.toggle("is-txr");
            
            switchOne.classList.toggle("is-hidden");
            switchTwo.classList.toggle("is-hidden");
            aContainer.classList.toggle("is-txl");
            bContainer.classList.toggle("is-txl");
            bContainer.classList.toggle("is-z");
        }
        // 点击切换
        let app = (e) => {
            for(var i =0;i < switchBtn.length;i++){
                switchBtn[i].addEventListener("click",getButtons);
                // console.log(111);
            }
            for(var i =0;i < switchBtn.length;i++){
                switchBtn[i].addEventListener("click",changeForm);
                // console.log(111);
            }
        }
       window.addEventListener("load",app);
        login = document.querySelector("#login");
        login.addEventListener('click',function (){
            username = document.querySelector("#login_username").value
            password = document.querySelector("#login_password").value
            $.get("/users/login/"+username+"/"+password,
                function (res) {
                    console.log(res.msg)
                    if ( res.msg == '登录成功' ) {
                        localStorage.setItem("userid",res.data.id)
                        localStorage.setItem("username",res.data.username)
                        localStorage.setItem("userAchievement",res.data.achievement)
                        window.location.href = "index.html"
                    }
                }
            )
        })

        //注册
        register = document.querySelector("#register");
        register.addEventListener('click',function (){
            username = document.querySelector("#register_username").value
            password = document.querySelector("#register_password").value
            $.get("/users/register/"+username+"/"+password,
                function (res) {
                    console.log(res.msg)
                    if ( res.msg == '注册成功' ) {
                        alert("注册成功！")
                        changeForm(switchBtn[0])
                        getButtons(switchBtn[0])
                    }else if (res.msg == '用户名已存在'){
                        alert('用户名已存在')
                    }else {
                        alert('请求错误')
                    }
                }
            )
        })
    </script>
</body>
</html>